<template>
  <view
    class="GridMenu class"
    :style="{ gridTemplateColumns: `repeat(${columnCount}, 1fr)` }"
  >
    <view
      v-for="(item, index) of dataSource"
      :key="index"
      @click="itemClickHandler(item)"
      class="GridMenuItem"
    >
      <RectWrap>
        <XImage
          :src="item.image"
          class="Icon"
          :style="iconStyle"
          :mode="iconStyle ? 'aspectFill' : 'widthFix'"
        />
      </RectWrap>
      <view>{{ item.label }}</view>
    </view>
  </view>
</template>
<script lang="ts">
import RectWrap from '@/components/RectWrap.vue';
import XImage from '@/components/XImage.vue';
import Vue from '@/utils/Vue';
import { PropType } from 'vue';

interface IData {}

export interface IMenuItem {
  key?: string | number;
  image: string;
  label: string;
  type?: string;
  url?: string;
}

/**
 * 格子菜单，一行N个的菜单组件
 */
export default Vue.extend({
  data(): IData {
    return {};
  },
  components: { XImage, RectWrap },
  emits: ['onClick'],
  props: {
    /**
     * 菜单数据源
     */
    dataSource: Array as PropType<IMenuItem[]>,
    columnCount: {
      type: Number,
      default: 5,
    },

    /**
     * 点击菜单触发的函数
     */

    iconStyle: {
      type: [Object, String],
      required: false,
    },
  },
  methods: {
    itemClickHandler(value: IMenuItem) {
      console.log(value);
      this.$emit('onClick', value);
    },
  },
  options: { virtualHost: true },
  externalClasses: ['class'],
});
</script>
<style lang="less" scoped>
.GridMenu {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 15px;
  column-gap: 15px;
  .GridMenuItem {
    text-align: center;
    .Icon {
      width: 80%;
      margin-bottom: 6px;
    }
  }
}
</style>
